<template>
	<view class="sport-content">
		<view class="choose-sport-title">
			<view class="title">
				<text>选择你的运动目的</text>
			</view>
			<view class="recommended">
				<text>为您推荐精彩内容</text>
			</view>
		</view>
		<view class="recommended-main">
			<view class="recommended-row" v-for="(item,index) in targetList" :key="item.id">
				<view class="sport-img">
					<!-- <image class="project-img" :src="item.remark" mode=""></image>
					<img :src="item.src" alt="" class="project-img">
					<img :src="item.select ? '../../static/img/sportPurpose/selected.png' : '../../static/img/sportPurpose/select.png'"
						alt="" class="choose-img" @tap="chooseHandle(item.select,index)"> -->
				</view>
				
				<view class="sport-img">
					<image class="project-img" :src="item.remark" mode=""></image>
					<image :src="item.select ? '../../static/img/sportPurpose/selected.png' : '../../static/img/sportPurpose/select.png'"
						alt="" class="choose-img" @tap="chooseHandle(item.select,index)">
				</view>
				
				<view class="title">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="complete-skip-row">
			<view class="complete-btn-row">
				<u-button type="default" shape="circle" class="complete-btn" @tap="completeHandle(true)"
					hover-class="none">完成</u-button>
			</view>
			<!-- <view class="skip-row">
				<text @tap="completeHandle(false)">跳过</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	import { API } from '../../config/myApi.js';
	export default {
		data() {
			return {
				targetList: [],
				params: {
					face: '../../static/img/person/head.png',
					nick: '',
					sex: '',
					birthday: '',
					height: '',
					mobilePhone: '',
					nickName: '',
					weight: '',
					targetType: '',
				},
			}
		},
		onLoad() {
			this.getType();
		},
		methods: {
			getType() {
				const token = uni.getStorageSync('token');
				const pram = {
					name: "",
					page: {
					    order: "",
					    pageNumber: 1,
					    pageSize: 9,
					    sort: ""
					},
					typeIds: [1000]
				}
				API.getDataList(pram).then(res => {
					console.log('ddddd', res)
					if(res.code==200) {
						const data = res.result.records;
						for (let item of data) {
							item.select=false;
						}
						this.targetList = data;
						data[0].select=true
					}
				})
			},
			//完成或者取消
			completeHandle(bool) {
				console.log(bool);
				const regData = uni.getStorageSync('regData')
				const targetType = uni.getStorageSync('targetType')
				const mobile = uni.getStorageSync('mobile')
				const pram = {
					...regData,
					targetType: targetType,
					bmi: '22.12',
					mobile: mobile
				}
				console.log('ooo',pram);
				API.register(pram).then(res=> {
					console.log('ressss',res)
					if(res.code==200) {
						uni.setStorageSync('token',res.result.accessToken);
						// API.getMember().then(data=> {
						// 	console.log('eeed',data)
						// 	if(data.code==200) {
						// 		// const detail = uni.getStorageSync('userDetail')
						// 		// console.log('detail++',detail)
						// 	}
						// })
						uni.switchTab({
							url: '/pages/tabbar/home/index'
						})
					}
				})
				//如果为true发送请求,跳转页面,否则直接跳转
				// if (bool) {
				// 	//发送请求后做跳转至首页
				
				// } else {
				// 	//直接跳转至首页
				// 	// uni.switchTab({
				// 	// 	url:'/pages/tabbar/home/index'
				// 	// })
				// 	uni.navigateTo({
				// 		url: '/pages/certification/identity'
				// 	})
				// }
			},
			//切换是否选中
			chooseHandle(choose, index) {
				this.targetList[index].select = !choose;
				let chooseList = [];
				const targetType = [];
				for (let item of this.targetList) {
					if(item.select==1) {
						targetType.push(item.id);
					}
				}
				uni.setStorageSync('targetType',targetType)
				// const data = uni.getStorageSync('targetType')
				// console.log(choose,index,data,'555',targetType);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sport-content {
		min-height: calc(100vh - 88rpx);
		background: #fff;
		padding: 0rpx 50rpx;
		overflow: hidden;
		width: 100%;
		.choose-sport-title {
			text-align: center;
			margin-top: 110rpx;

			.title {
				font-size: 46rpx;
				color: #333333;
				font-weight: bold;
			}

			.recommended {
				color: #666666;
				font-size: 30rpx;
				margin-top: 28rpx;
			}
		}

		.recommended-main {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 37rpx;
			// margin-top: 280rpx;
			align-items: center;
			flex-wrap: wrap;			
			.recommended-row {
				margin-top: 50rpx;
				.sport-img {
					width: 172rpx;
					height: 172rpx;
					position: relative;

					.project-img {
						width: 172rpx;
						height: 172rpx;
						border-radius: 50%;
					}

					.choose-img {
						width: 46rpx;
						height: 46rpx;
						position: absolute;
						bottom: 0rpx;
						right: 0rpx;
					}
				}

				.title {
					text-align: center;
					margin-top: 20rpx;
				}
			}

			// .recommended-row:nth-of-type(2) {
			// 	margin: 0rpx 30rpx;
			// }
		}

		.complete-skip-row {
			margin-top: 380rpx;

			.complete-btn-row {
				.complete-btn {
					background-color: #F4333C;
					color: #fff;
					height: 90rpx;
				}

				.u-hairline-border:after {
					border: none;
				}
			}

			.skip-row {
				text-align: center;
				font-size: 26rpx;
				color: #999999;
				margin: 40rpx 0rpx;
			}
		}
	}
</style>
